<template>
    <div>
        <div>
            <Button @click="onClick">
                <span>切换</span>
            </Button>
        </div>
        <Carousel v-model="value1" loop autoplay v-if="bool">
            <CarouselItem v-for="(item,index) in banner" :key="item.id">
                <div>
                    <div class="text">{{item.text}}</div>
                </div>
                <div>
                    <div class="id">{{index+1}}</div>
                </div>
                <img :src="item.image" />
            </CarouselItem>

        </Carousel>

    </div>

</template>


<script>
import service from "@/service";
import { mapState } from "vuex";
export default {
  name: "book",
  data() {
    return {
      banner: [],
      bool: true
    };
  },
  computed: {
    ...mapState({
      username: state => {
        return state.home.banner;
      }
    })
  },
  methods: {
    onClick() {
      this.bool = !this.bool;
    }
  },
  created() {
    service.get("/v1/book/banner").then(res => {
      this.banner = res;
    });
  }
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 20px;
  margin-bottom: 10px;
}
.id {
  font-size: 20px;
  color: red;
}
</style>